<template>
  <!-- 空间信息 -->
  <a-flex justify="space-between">
    <h2>{{ loginUserStore.loginUser.userName }}(上传记录)</h2>
    <a-space size="middle">
      <a-button type="primary" :href="`/add_picture?spaceId=${id}`" target="_blank">
        + 创建图片
      </a-button>

    </a-space>
  </a-flex>
  <!-- 图片列表 -->
  <a-list
    :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
    :data-source="dataList"
    :loading="loading"
    :pagination="pagination"
    @change="onPageChange"
  >
    <template #renderItem="{ item: picture }">
      <a-list-item style="padding: 0">
        <!-- 单张图片 -->
        <a-card hoverable @click="doClickPicture(picture)">
          <template #cover>
            <img
              style="height: 180px; object-fit: cover"
              :alt="picture.name"
              :src="picture.thumbnailUrl ?? picture.url"
              loading="lazy"
            />
          </template>
          <a-card-meta :title="picture.name">
            <template #description>
              <a-flex>
                <a-tag color="green">
                  {{ picture.category ?? '默认' }}
                </a-tag>
                <a-tag v-for="tag in picture.tags" :key="tag">
                  {{ tag }}
                </a-tag>
                <!--显示审核状态-->
                <a-tag v-if="picture.reviewStatus!== PIC_REVIEW_STATUS_ENUM.PASS" color="red">
                  {{ picture.reviewStatus }}
                </a-tag>
                <a-tag v-if="picture.reviewStatus!== PIC_REVIEW_STATUS_ENUM.REJECT" color="blue">
                  {{ picture.reviewStatus }}
                </a-tag>
              </a-flex>
            </template>
          </a-card-meta>
        </a-card>
      </a-list-item>
    </template>
  </a-list>

</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'

import { message } from 'ant-design-vue'
import {
  listAddPictureVoByPageUsingPost
} from '@/api/fileController.ts'
import { useLoginUserStore } from '@/stores/Userstore.ts'
import { PIC_REVIEW_STATUS_ENUM } from '@/constants/picture.ts'
import { useRouter } from 'vue-router'
const loginUserStore = useLoginUserStore()

// 数据
const dataList = ref([])
const total = ref(0)
const loading = ref(true)

// 搜索条件
const searchParams = reactive<API.PictureQueryRequest>({
  current: 1,
  pageSize: 12,
  sortField: 'createTime',
  sortOrder: 'descend',

})

// 分页参数
const onPageChange = (page, pageSize) => {
  searchParams.current = page
  searchParams.pageSize = pageSize
  fetchData()
}

// 获取数据
const fetchData = async () => {
  loading.value = true
  // 转换搜索参数
  const params = {
    userId: loginUserStore.loginUser.id,
    ...searchParams,
  }

  const res = await listAddPictureVoByPageUsingPost(params)
  if (res.data.data) {
    dataList.value = res.data.data.records ?? []
    total.value = res.data.data.total ?? 0
  } else {
    message.error('获取数据失败，' + res.data.message)
  }
  loading.value = false
}
// 跳转至图片详情
const router = useRouter()
const doClickPicture = (picture) => {
  router.push({
    path: `/picture/${picture.id}`,
  })
}

const pagination = computed(() => {
  return {
    current: searchParams.current ?? 1,
    pageSize: searchParams.pageSize ?? 10,
    total: total.value,
    showSizeChanger: true,
    showTotal: (total) => `共 ${total} 条`,
  }
})
// 页面加载时请求一次
onMounted(() => {
  fetchData()
})

</script>

<style scoped>

</style>
